/* stylelint-disable declaration-empty-line-before */
// @import 'ant-design-vue/lib/style/themes/default.less';
// @import 'ant-design-vue/dist/antd.dark.less';
// @root-entry-name: variable;
@light: #fff;
@dark: #fff;
@ChineseRed: #ffe5e5;
@blue: #e6f5ff;


@light-spback: #F2F5F7;
@dark-spback: #212332;
@ChineseRed-spback: #ffe5e5;
@blue-spback: #e6f5ff;


//
@light-back: #fff;
@dark-back: #000;
@ChineseRed-back: #ffe5e5;
@blue-back: #e6f5ff;

@light-sec-back: #fff;
@dark-sec-back: #000;
@ChineseRed-sec-back: #fff;
@blue-sec-back: #fff;

@light-text: #000;
@dark-text: #fff;
@ChineseRed-text: #fff;
@blue-text: #fff;

@light-wb-text: #000;
@dark-wb-text: #fff;
@ChineseRed-wb-text: #000;
@blue-wb-text: #000;

@light-content-back: #fff;
@dark-content-back: #2a2d3e;
@ChineseRed-content-back: #fff;
@blue-content-back: #fff;

@light-content-back-user: #fff;
@dark-content-back-user: #212332;
@ChineseRed-content-back-user: #fff;
@blue-content-back-user: #fff;

html.ChineseRed {
  .ant-layout-header.topMenuHeader {
    background: url('/image/theme/ChineseRed/header.png') no-repeat !important;
    background-size: cover !important;
  }

  .ant-menu-submenu-popup .ant-menu-vertical.ant-menu-sub {
    background: #e60001 !important;
  }

  .layout .ant-layout {
    background-color: #ffe5e5;
  }

  .layout .ant-layout-header {
    background-color: #ffe5e5;
  }

  .router-view-content {
    background-color: #ffe5e5;
  }
}

html.dark {
  .tabs .ant-tabs-tab {
    background: #2a2d3e !important;
  }

  .router-view-content {
    background-color: #212332;
  }

  .split-wrapper {
    background-color: #212332;
  }

  .tabs-view {
    border-top: 1px solid #2a2d3e;
  }

  .layout .ant-layout {
    background-color: #212332;
  }

  .layout .ant-layout-header {
    background-color: #212332;
  }

  .logo {
    background-color: #212332;
  }

  .topMenuHeader .logo {
    background-color: #2a2d3e;
    padding-bottom: 0!important;
  }

  .layout .ant-layout-sider {
    background-color: #2a2d3e;
  }

  .ant-menu-dark {
    background-color: #2a2d3e;
  }

  .ant-menu-dark.ant-menu-inline .ant-menu-sub.ant-menu-inline {
    background-color: #2a2d3e;
  }

  .ant-table-wrapper .ant-table-thead > tr > th {
    background: #2a2d3e !important;
    color: #fff !important;
  }

  .ant-table-wrapper .ant-table-thead>tr>th, .ant-table-wrapper .ant-table-tbody>tr>td,.ant-table-wrapper tfoot>tr>td {
    background-color:  #2a2d3e !important;
  }
}

html.blue {
  .layout .ant-layout {
    background-color: #e6f5ff;
  }

  .router-view-content {
    background-color: #e6f5ff;
  }

  .layout .ant-layout-header {
    background-color: #e6f5ff;
  }
}

.themeSetStyle(@classNames, @propName,  @joinClass, @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);
  .customSetStyle(@className, @propName, @joinClass);
  .themeSetStyle(@classNames, @propName, @joinClass, (@i + 1));
}

.themeSetBgStyle(@classNames, @joinClass,  @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);
  .customSetStyle(@className, background-color, @joinClass);
  .themeSetBgStyle(@classNames, @joinClass, (@i + 1));
}
.themeSetTextStyle(@classNames, @joinClass,  @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);
  .customSetStyle(@className, color, @joinClass);
  .themeSetTextStyle(@classNames, @joinClass, (@i+1));
}

.customSetStyle(@className, @propName, @joinClass) {
  html {
    &.dark {
      .@{className} {
        @custom-class: ~'dark-@{joinClass}';
        @{propName}: @@custom-class;
      }
    }

    &.light {
      .@{className} {
        @custom-class: ~'light-@{joinClass}';
        @{propName}: @@custom-class;
      }
    }

    &.ChineseRed {
      .@{className} {
        @custom-class: ~'ChineseRed-@{joinClass}';
        @{propName}: @@custom-class;
      }
    }

    &.blue {
      .@{className} {
        @custom-class: ~'blue-@{joinClass}';
        @{propName}: @@custom-class;
      }
    }
  }
}
